import {
  DatePicker,
  Form,
  Grid,
  Input,
  Radio,
  Select,
  Switch,
} from "@arco-design/web-react";
import { FormItemEnum } from "./enums";
import { CustomFormPropsInt, FormItemType } from "./types";

const FormItem = Form.Item;
const Col = Grid.Col;

export const defaultColProps = {
  span: 6,
};

const commonProps = {
  allowClear: true,
};

export const getItem = (item: FormItemType) => {
  let _item = null;
  switch (item.el) {
    case FormItemEnum.INPUT:
      _item = <Input {...item.attrs} {...commonProps} />;
      break;
    case FormItemEnum.SELECT:
      _item = <Select {...item.attrs} {...commonProps}></Select>;
      break;
    case FormItemEnum.CUSTOM:
      _item = <div>{item.render && item.render()}</div>;
      break;
    case FormItemEnum.DATE:
      _item = <DatePicker {...item.attrs} {...commonProps} />;
      break;
    case FormItemEnum.DATERANGE:
      _item = <DatePicker.RangePicker {...item.attrs} {...commonProps} />;
      break;
    case FormItemEnum.SWITCH:
      _item = <Switch {...item.attrs} />;
      break;
    case FormItemEnum.RADIO:
      _item = (
        <Radio.Group {...item.attrs}>
          {item.enum?.map((el) => (
            <Radio key={el.value} value={el[item.feildNames?.value ?? "value"]}>
              {el[item.feildNames?.label ?? "label"]}
            </Radio>
          ))}
        </Radio.Group>
      );
      break;
    default:
      _item = <div></div>;
  }
  if (item.el === FormItemEnum.SWITCH) {
    return (
      <FormItem
        key={item.field}
        field={item.field}
        label={item.label}
        triggerPropName="checked"
        {...item.formItemAttrs}
      >
        {_item}
      </FormItem>
    );
  } else {
    return (
      <FormItem
        key={item.field}
        field={item.field}
        label={item.label}
        rules={item.rules}
        {...item.formItemAttrs}
      >
        {_item}
      </FormItem>
    );
  }
};

export const getFormItem = (props: CustomFormPropsInt, item: FormItemType) => {
  return (
    <Col
      span={props.wrap ? 24 : defaultColProps.span}
      {...item.colProps}
      key={item.field}
    >
      {getItem(item)}
    </Col>
  );
};
